<template>
  <div>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/material-dashboard.css" rel="stylesheet" />
    <link
      rel="stylesheet"
      href="css/font-awesome-4.7.0/css/font-awesome.min.css"
    />

    <div class="wrapper">
      <div class="sidebar" data-color="purple" data-image="images/404.png">
        <!--
            Tip 1: You can change the color of the sidebar using: data-color="purple | blue | green | orange | red"
            Tip 2: you can also add an image using data-image tag
        -->
        <div class="logo">
          <a href="link/0.html" target="right" class="simple-text">
            <img src="images/youxitianchong.png" width="30" height="30" />
            传一小游戏
          </a>
        </div>
        <div class="sidebar-wrapper">
          <ul class="nav">
            <li class="active">
              <a href="javascript:;" @click="handleChange_all()"
                ><p>全部游戏</p></a
              >
            </li>
            <li v-for="item in gametype" :key="item.parameterid">
              <a
                href="javascript:;"
                @click="handleChange_item(item.parameterid)"
                ><p>{{ item.parametername }}</p></a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main_game">
      <GameHallChildView :checktype="checktype" ref="child"></GameHallChildView>
      <!-- <iframe name="con" id="mainiframe" src=""> </iframe> -->
      <!-- <router-view id="mainiframe"></router-view> -->
    </div>
  </div>
</template>

<script>
import GameHallChildView from "@/views/child/GameHallChildView.vue";
export default {
  components: {
    GameHallChildView,
  },
  data() {
    return {
      count: 30,
      gametype: [],
      checktype: 0,
    };
  },
  methods: {
    findGameTypeList() {
      this.$axios.get("/api/gamemall-service/mall/gametype").then((resp) => {
        this.gametype = resp.data.data;
      });
    },
    handleChange_all() {
      this.$refs.child.xxxy(0);
    },
    handleChange_item(type) {
      //   console.log(type);
      this.checktype = type;
      this.$refs.child.xxxy(type);
    },
  },
  created() {
    this.findGameTypeList();
  },
  mounted() {},
};
</script>

<style>
.main_game {
  width: 80%;
  background-color: white;
  float: right;
}
.main_game iframe {
  width: 100%;
  background-color: red;
}
.main_game mainiframe {
  width: 100%;
  background-color: red;
}
.box {
  width: 20%;
  border: 1px solid #e4ecf3;
  box-shadow: 1px 2px 3px #f2f6f8;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  min-width: 160px;
  float: left;
  overflow: hidden;
  transition: all 0.3s;
  margin: 22px 0 15px 3%;
}
.box .logo {
  height: 40px;
  position: relative;
  font-size: 14px;
  font-weight: 700;
  color: #3273dc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.1rem;
}
.logo img {
  width: 30px;
  height: 30px;
}
.box .msg {
  color: gray;
  font-size: 12px;
  padding-top: 10px;
  height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>